<lv-datatable [lvData]="data" #lvTable>
  <thead>
    <tr>
      <th lvCellKey="id" lvShowCustom width="100px">
        Id
        <div lvCustom class="customer-filter">
          <i
            lvColorState
            lv-icon="lv-icon-search"
            [ngClass]="{ active: !!idFilterValue || idSearchPanelVisible }"
            lv-popover
            [lvPopoverContent]="idFilterTpl"
            lvPopoverTheme="light"
            lvPopoverPosition="bottomRight"
            lvPopoverShowArrow="false"
            lvPopoverTrigger="customize"
            [(lvPopoverVisible)]="idSearchPanelVisible"
            (click)="openIdSearchPanel()"
          ></i>
        </div>
      </th>
      <th lvCellKey="name" lvShowCustom>
        Name
        <div lvCustom class="customer-filter">
          <i
            lvColorState
            lv-icon="lv-icon-search"
            [ngClass]="{ active: !!nameFilterTrueValue || nameSearchPanelVisible }"
            #nameFilter="lvPopover"
            lv-popover
            [lvPopoverContent]="nameFilterTpl"
            lvPopoverTheme="light"
            lvPopoverPosition="bottomRight"
            lvPopoverShowArrow="false"
            lvPopoverTrigger="customize"
            [lvPopoverBeforeOpen]="popoverBeforeOpen"
            [(lvPopoverVisible)]="nameSearchPanelVisible"
            (click)="openNameSearchPanel()"
          ></i>
        </div>
      </th>
      <th lvCellKey="age">Age</th>
      <th lvCellKey="random" lvShowCustom width="120px">
        Random
        <div lvCustom class="customer-filter">
          <i
            lv-icon="lv-icon-filter"
            [ngClass]="{ active: getSelectedRandomOptions(cacheOptions).length || randomPanelVisible }"
            #randomPopover="lvPopover"
            lv-popover
            [lvPopoverBeforeOpen]="popoverBeforeOpen"
            [lvPopoverContent]="randomFilterTpl"
            lvPopoverTheme="light"
            lvPopoverPosition="bottomRight"
            lvPopoverShowArrow="false"
            lvPopoverTrigger="customize"
            [(lvPopoverVisible)]="randomPanelVisible"
            (click)="openRandomPanel()"
            lvPopoverClassName="lv-cell-default-filter"
          ></i>
        </div>
      </th>
      <th lvCellKey="date" lvShowCustom>
        Date
        <div lvCustom class="customer-filter">
          <i
            lv-icon="lv-icon-filter"
            [ngClass]="{ active: getSelectedRangeDate() }"
            #datePopover="lvPopover"
            lv-popover
            [lvPopoverContent]="dateFilterTpl"
            lvPopoverTheme="light"
            lvPopoverPosition="bottomRight"
            lvPopoverShowArrow="false"
            lvPopoverTrigger="customize"
            [(lvPopoverVisible)]="rangeDatePanelVisible"
            (click)="openRangeDatePanel()"
            (lvPopoverExternalTrigger)="cancelRangeDate()"
            lvPopoverClassName="customer-date-range"
          ></i>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvTable.renderData">
      <tr>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.random }}</td>
        <td>{{ item.date | date : 'yyyy-MM-dd' }}</td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>

<ng-template #idFilterTpl>
  <lv-search [ngModel]="idFilterValue" [lvFocus]="true" (ngModelChange)="updateSearch($event)" style="width: 195px"></lv-search>
</ng-template>

<ng-template #nameFilterTpl>
  <span class="name-filter-title">Name include</span>
  <input #nameFilterInput lv-input [(ngModel)]="nameFilterValue" class="name-filter-input" (keydown)="confirmName($event)" />
  <div class="name-filter-operation">
    <button lv-button (click)="nameFilterValue = ''; filterByName(nameFilterValue); nameSearchPanelVisible = false">Reset</button>
    <button #primaryButton lv-button lvType="primary" (click)="filterByName(nameFilterValue); nameSearchPanelVisible = false">
      Confirm
    </button>
  </div>
</ng-template>

<ng-template #randomFilterTpl>
  <div class="lv-filter-select">
    <div class="lv-filter-select-container">
      <div class="lv-filter-select-list">
        <div
          class="lv-filter-select-item lv-filter-select-multiple"
          [ngClass]="{ disabled: !!item.disabled, selected: item.selected }"
          *ngFor="let item of options"
          (click)="toggleRandom(item)"
        >
          <label lv-checkbox [ngModel]="item.selected" lvControl [lvDisabled]="item.disabled"></label>
          <span class="lv-filter-text">
            {{ item.label }}
          </span>
        </div>
      </div>
    </div>
    <div class="lv-filter-select-operation">
      <button lv-button (click)="reset()">Reset</button>
      <button lv-button lvType="primary" (click)="submit()">Submit</button>
    </div>
  </div>
</ng-template>

<ng-template #dateFilterTpl>
  <lv-date-range-picker
    [(ngModel)]="rangeDate"
    lvInline="true"
    [lvFooterExtra]="footerTpl"
    [lvShowTime]="true"
    [lvCurrentInput]="currentInput"
    (lvRangeTagChange)="rangeTagChange($event)"
    #dateRangePicker
  ></lv-date-range-picker>
  <ng-template #footerTpl>
    <lv-group lvGutter="16px" style="justify-content: flex-end; margin-top: 0.16rem; margin-right: 0.16rem; margin-bottom: 0.16rem">
      <button lv-button (click)="resetDate()">Reset</button>
      <button lv-button lvType="primary" [disabled]="disableOk()" (click)="onOk()">{{ getOkLabel() }}</button>
    </lv-group>
  </ng-template>
</ng-template>
